<template>
  <div>
    <el-dialog
      width="550px"
      :title="`${formData.expressName}${$t('合同')}`"
      destroy-on-close
      append-to-body
      :visible.sync="show"
      :before-close="cancel"
    >
      <div class="file-list">
        <div v-for="(item, index) in tableData" :key="index" class="file-list-item">
          <el-link type="primary" target="_blank" :href="item.url">
            <span>{{ index + 1 }}. </span>{{ item.name }}
          </el-link>
          <div style="color: red" @click="handleDelete(item)" v-hasPermi="['distribution:expressCompany:remove']">
            删除
          </div>
        </div>
      </div>
      <!-- 上传 -->
      <div class="add-btn" @click="handleUpload" v-hasPermi="['distribution:expressCompany:uploadExpressContract']">
        <i class="el-icon-plus"></i>
      </div>
      <div slot="footer">
        <el-button @click="cancel">{{ $t('关闭') }}</el-button>
      </div>
    </el-dialog>
    <AddContract :show.sync="addContract.show" :formData="addContract.formData" @getList="getList" />
  </div>
</template>

<script>
import { selectExpressContract, delExpressCompanyContract } from '@/api/basicSetting/expressCompany'

import AddContract from './addContract.vue'

export default {
  components: { AddContract },

  props: {
    /**
     * formData
     */
    formData: {
      type: Object,
      default: () => ({}),
    },
    /**
     * 控制显示隐藏
     */
    show: {
      type: Boolean,
      required: true,
      default: false,
    },
  },
  data() {
    return {
      addContract: {
        show: false,
        formData: {},
      },
      tableData: [],
    }
  },
  computed: {},
  watch: {
    show: function (newValue) {
      if (newValue) {
        this.getList()
      }
    },
  },

  methods: {
    handleDelete(item) {
      this.$confirm(this.$t('确认删除?'), this.$t('提示'), {
        type: 'warning',
      }).then(() => {
        delExpressCompanyContract(item.id).then((res) => {
          const { code, data, msg } = res
          if (code === 200) {
            this.$message({ type: 'success', message: msg })
            this.getList()
          }
        })
      })
    },
    getList() {
      selectExpressContract({ expressId: this.formData.id }).then((res) => {
        this.tableData = res.data
      })
    },

    handleUpload() {
      this.addContract.formData = this.formData
      this.addContract.show = true
    },
    handleSubmit() {},
    cancel() {
      this.$emit('update:show', false)
    },
  },
}
</script>
<style scoped lang="scss">
.file-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  &-item {
    display: flex;
    align-items: center;
    font-size: 13px;
    justify-content: space-between;
    cursor: pointer;
  }
}
.add-btn {
  margin-top: 20px;
  width: 100px;
  height: 100px;
  border-radius: 5px;
  border: 1px dashed #cccc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 25px;
  color: #cccc;
  cursor: pointer;
  &:hover {
    color: #1890ff;
    border: 1px dashed #1890ff;
  }
}
</style>
